<template>
  <el-container class="main_con" >
    <div class="edit_con">
      <div class="edit_title">{{pageName}}</div>
      <div class="edit_content">
        <el-form size="medium" ref="smsForm" :model="obj" :rules="itemRules" label-width="100px" class="edit_form">
          <el-form-item prop="name" label="模板名称">
            <el-input placeholder="请输入模板名称" v-model="obj.name"></el-input>
          </el-form-item>
          <el-form-item prop="sign_name" label="模板签名">
            <el-input placeholder="请输入模板签名" v-model="obj.sign_name"></el-input>
          </el-form-item>
          <el-form-item prop="template_code" label="模板ID">
            <el-input placeholder="请输入服务商提供的模板ID" v-model="obj.template_code"></el-input>
          </el-form-item>

          <el-form-item prop="scene" label="应用场景">
            <el-select size="medium" v-model="obj.scene" placeholder="请选择应用场景" style="width:250px" @change="changeScene">
              <el-option
                v-for="(item,i) in scene"
                :key="i"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-select size="medium" multiple v-model="sceneItemSelected" placeholder="请选择场景变量" style="width:250px" @change="changeSceneItem">
              <el-option
                v-for="(item,i) in sceneItem"
                :key="i"
                :label="item"
                :value="item">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="替换变量" v-show="attrList.length > 0">
            <div class="attrGroup">
              <div class="ahead">
                <div class="aitem">站内变量</div>
                <div class="aitem">模板变量</div>
              </div>
              <div class="alist">
                <ul>
                  <li v-for="(item,i) in attrList" :key="i">
                    <div class="aitem"><el-input disabled v-model="item.siteKey"></el-input></div>
                    <div class="aitem"><el-input placeholder="短信模板变量" v-model="item.smsKey"></el-input></div>
                  </li>
                </ul>
              </div>
            </div>
          </el-form-item>

          <el-form-item label="状态">
            <el-radio-group v-model="obj.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="0">未启用</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>
      </div>

      <div class="edit_footer">
        <el-button size="medium" v-has type="primary" @click="saveData">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  addTemplate,
  editTemplate,
  getTemplate
} from '@/api/mall/sms';
import { getNoticeSceneAll } from '@/api/mall/notice';
export default {
  data(){
    return {
      rk:1,
      pageIsEdit:0,//0->新增,1->编辑
      pageName:'新增模板',
      csms:'ali',//当前短信接口api调用主key
      obj: {
        scene:'',
        name:'',
        sign_name:'',
        template_code:'',
        attr:{},
        status:1
      },
      _obj:{},
      _scene:{},
      scene:[],
      //sceneSelected:[],
      sceneItem:[],
      sceneItemSelected:[],
      isLoading: false,
      attrList:[],
      itemRules: {
        name: [{
          required: true,
          trigger: 'blur',
          message: '请输入模板名称',
        }],
        sign_name: [{
          required: true,
          trigger: 'blur',
          message: '请输入模板签名',
        }],
        scene: [{
          required: true,
          message: '请选择场景',
        }],
        template_code: [{
          required: true,
          trigger: 'blur',
          message: '请输入服务商提供的模板ID',
        }],
      }
    }
  },
  components: {},
  created(){
    this.getScene();
 
  },
  mounted(){},
  methods: {
    //获取模板数据
    getTemplate(id){
      this.isLoading = true;
      
      getTemplate(this.csms,id).then(res => {
        this.isLoading = false;
        let o = res.msg;
        //处理数据
        this.obj.id = o.id;
        this.obj.name = o.name;
        this.obj.scene = o.scene;
        this.obj.sign_name = o.sign_name;
        this.obj.template_code = o.template_code;
        this.obj.status = o.status;
        //替换场景变量
        this.sceneItem = this._scene[o.scene];
        for(let p in o.attr){
          this.attrList.push({
            siteKey:o.attr[p],
            smsKey:p
          })
          this.sceneItemSelected.push(o.attr[p]);
        };
      });
    },
    //切换场景分类(第二级)
    changeSceneItem(item){
      this.attrList = [];
      if(item.length > 0){
        item.forEach(e => {
          this.attrList.push({
            siteKey:e,
            smsKey:''
          })
        });
      };
    },
    //切换场景(大)
    changeScene(item){  
      this.sceneItem = this._scene[item];
      this.sceneItemSelected = [];
      this.attrList = [];
    },
    //获取场景数据
    getScene(){
      this.isloading = true;
      getNoticeSceneAll().then(res => {
        this.isloading = false;
        let o = res.msg;
        this._scene = o;
        //封装场景列表数据
        for(let x in o){
          this.scene.push({
            label:x,
            value:x
          });
        };
        //获取路由参数(编辑时使用)
        if(this.$route.query.id){
          //编辑页面
          this.pageIsEdit = 1;
          this.pageName = '编辑模板'; 
          this.getTemplate(this.$route.query.id);
        }else{
          this.pageIsEdit = 0;
          this.pageName = '新增模板'; 
          //this._obj = Object.assign({},this.obj);
        };
      });
    },
    //保存数据
    saveData(){
      this.$refs.smsForm.validate(valid => {
        if (valid) {
          //处理合并数据
          let _data = Object.assign({},this.obj);
          //生成变量数组
          _data.attr = {};
          if(this.attrList.length > 0){
            this.attrList.forEach(e => {
              _data.attr[e.smsKey] = e.siteKey;
            });
          };

          //提交保存数据
          this.isLoading = true;
          if(Boolean(this.pageIsEdit)){
            //编辑
            editTemplate(this.csms,_data).then(res => {
              this.isLoading = false;
              this.$router.push({path:'/notice/sms/template'});
            }).catch(e => {
              this.isLoading = false;
            });
          }else{
            //新增
            addTemplate(this.csms,_data).then(res => {
              this.isLoading = false;
              this.$router.push({path:'/notice/sms/template'});
            }).catch(e => {
              this.isLoading = false;
            });
          };           
        };
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.attrGroup{
  width: 100%;
  color: #7f7f7f;
  border: 1px solid #dcdfe6;

  .ahead{
    display: flex;
    font-weight: 700;
    height: 36px;
    line-height: 36px;
    background: #f4f6f8;
    border-bottom: 1px solid #dcdfe6;

    .aitem{
      flex: 1;
      padding-left: 20px;
      border-right: 1px solid #dcdfe6;

      &:last-child{
        border-right: 0;
      }
    }
  }

  .alist{
    ul{
      li{
        display: flex;
        border-bottom: 1px solid #dcdfe6;
        line-height: 36px;

        &:last-child{
          border-bottom:0;
        }

        .aitem{
          flex: 1;
          padding: 10px;
          border-right: 1px solid #dcdfe6;

          &:last-child{
            border-right: 0;
          }
        }
      }
    }
  }


}
</style>